<template>
  <view class="bg-[var(--page-bg-color)] min-h-[100vh]" :style="themeColor()">

    <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getmemberListFn" top="50rpx">
      <view v-for="(item, index) in memberList" :key="index"
        class="sidebar-margin card-template py-0  mb-[var(--top-m)]">
        <view @click="handleItemClick(item)">
          <view class="flex items-center ">
            <view class="w-[60rpx] h-[60rpx]">
              <image v-if="item.decodeFields[1].value == 2"
                :src="'http://files.meton.vip/4e5bf58679eb9357b2fe51253bd237964fa4f851eed3ee3a80c219996a34e54a.png'"
                class="w-[60rpx] h-[60rpx]"></image>
              <image v-else
                :src="'http://files.meton.vip/636a0ab14592275f16f31842e69c58aaacd01a3b29a982e7ea1bd204ea7f34f0.png'"
                class="w-[60rpx] h-[60rpx]"></image>
            </view>
            <view class="flex-1  flex items-center ml-[20rpx]  box-border py-[30rpx] border-0">
              <view class="flex-1">
                <view class="text-[26rpx] text-[#333]">{{ item.decodeFields[0].value }}{{ item.description ? ' - '
                  +
                  item.description : '' }}</view>
                <view class="text-[24rpx] text-[var(--text-color-light9)] mt-[16rpx]">
                  {{ item.decodeFields[1].value == 1 ? '男' : '女' }}</view>
              </view>
              <view class="text-[26rpx] font-500 price-font"> {{ rightText }}</view>
            </view>
          </view>
        </view>
      </view>
      <mescroll-empty :option="{ tip: '暂无宝宝档案' }" v-if="!memberList.length && loading"></mescroll-empty>
    </mescroll-body>
    <view class="w-full footer">
      <view class="py-[var(--top-m)] px-[var(--sidebar-m)] footer w-full fixed bottom-0 left-0 right-0 box-border">
        <button hover-class="none"
          class="primary-btn-bg text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500"
          @click="addNew">添加新档案</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { t } from '@/locale'
import { redirect, img } from '@/utils/common';
// import { getmemberList, } from '@/app/api/member';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app';
import { timeFormat } from '@/utils/formatting';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
import { getMemberBabyList, getBpmFormPage } from '../api';

let wap_member_id = uni.getStorageSync('wap_member_id');

const memberList = ref<Array<any>>([]);
const mescrollRef = ref(null);
const loading = ref<boolean>(false);
const operationType = ref('') //

const rightText = ref('查看详情')
const decodeFields = (fields: any[]) => {
  const rule: any[] = [];
  fields.forEach((item: string) => {
    rule.push(JSON.parse(item));
  });
  return rule;
};
const getmemberListFn = (mescroll: any) => {
  let data = {
    pageNo: mescroll.num,
    pageSize: mescroll.size,
    userId: wap_member_id
  };
  loading.value = false;

  getMemberBabyList(data).then((res: any) => {
    let newArr = res.data.list;
    mescroll.endSuccess(newArr.length);
    //设置列表数据
    if (mescroll.num == 1) {
      memberList.value = []; //如果是第一页需手动制空列表
    }
    memberList.value = memberList.value.concat(newArr);
    memberList.value.forEach((ele) => {
      ele.decodeFields = decodeFields(ele.fields)
    })

    loading.value = true;
  }).catch(() => {
    loading.value = true;
    mescroll.endErr(); // 请求失败, 结束加载
  })
}

const addNew = () => {
  redirect({ url: `/addon/ertui/pages/form-webview`, param: { type: 'add' }, mode: 'navigateTo' })
};
const handleItemClick = (item: any) => {
  delete item.decodeFields
  uni.setStorageSync('memberInfo', item);
  if (operationType.value == 'inspect') {

    redirect({ url: `/addon/ertui/pages/diy-inspect`, mode: 'navigateTo' })

  } else {
    // 查看宝宝信息 item 就是对应宝宝档案模板

    redirect({ url: `/addon/ertui/pages/form-webview`, param: { type: 'look' }, mode: 'navigateTo' })


  }
};
const getConfig = async () => {
  const { data: addMemberList } = await getBpmFormPage({ type: 0, status: 0 })
  const addMemberConfig = addMemberList.list[0]
  uni.setStorageSync('addMember', addMemberConfig);
  const { data: zizhuzhenchaList } = await getBpmFormPage({ type: 1, status: 0 })
  const zizhuzhenchaConfig = zizhuzhenchaList.list[0]
  uni.setStorageSync('zizhuzhencha', zizhuzhenchaConfig)
};
onShow(() => {
  setTimeout(() => {
    getMescroll().resetUpScroll();
  }, 700);
})
onLoad(async (option: any) => {
  operationType.value = option.type;
  if (operationType.value == 'inspect') {
    rightText.value = '自助诊查';
  } else {
    rightText.value = '查看详情';
  }
  await getConfig();
});
</script>

<style lang="scss" scoped>
:deep(.type-class .u-popup .u-transition) {
  top: 86rpx !important;
}
</style>
